<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <div class="title">{{ form.projectName }}-项目岗位</div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="refresh">查询</el-button>
      </el-col>
    </el-row>
    <analyze :form="form"></analyze>
    <el-row class="group_css" v-for="item in form.groupList" :key="item.groupName" v-if="item.groupName != 0">
      <el-col :span="16" class="group_title">{{ selectDictLabels(dict.type.cld_project_groups, item.groupName)
        }}人员物资状况</el-col>
      <el-col :span="8" class="group_number">
        <div>
          <span>库存量：{{ item.stockNumber }}</span>
          <span style="margin-left: 50px;">库存成本：{{ toMoney(item.stockMoney) }}</span>
          <span style="margin-left: 50px;">消耗量：{{ item.consumeNumber }}</span>
          <span style="margin-left: 50px;">消耗金额：{{ toMoney(item.consumeMoney) }}</span>
        </div>
      </el-col>
      <el-table v-loading="loading" :data="item.list" border>
        <el-table-column label="岗位编号" align="center" prop="projectPostNo" />
        <el-table-column label="岗位名称" align="center" prop="projectPostName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_post" :value="scope.row.projectPostName" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="staffName" />
        <el-table-column label="性别" align="center" prop="staffSex" />
        <el-table-column label="联系方式" align="center" prop="staffPhone" />
        <el-table-column label="库存数量" align="center" prop="stockNumber">
          <template slot-scope="scope">
            <span v-if="scope.row.stockNumber > 0"><el-link type="primary"
                @click="handleViewDetails(scope.row, 1)">{{ scope.row.stockNumber }}</el-link></span>
          </template>
        </el-table-column>
        <el-table-column label="消耗数量" align="center" prop="consumeNumber">
          <template slot-scope="scope">
            <span v-if="scope.row.consumeNumber > 0"><el-link type="primary"
                @click="handleViewDetails(scope.row, 2)">{{ scope.row.consumeNumber }}</el-link></span>
          </template>
        </el-table-column>
        <el-table-column label="库存总额" align="center" prop="stockAmount">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.stockAmount ? 0 : scope.row.stockAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消耗总额" align="center" prop="consumeMoney">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.consumeMoney ? 0 : scope.row.consumeMoney) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>


    <!-- 个人库明细 /  消耗明细 -->
    <el-dialog :title="detailsTitle" :visible.sync="detailsOpen" width="80%" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleTabsClick">
        <el-tab-pane label="个人库数量" name="1"></el-tab-pane>
        <el-tab-pane label="消耗数量" name="2"></el-tab-pane>
      </el-tabs>
      <el-table :data="detailsList" border>
        <el-table-column label="商品编号" align="center" prop="commodityNo" />
        <el-table-column label="商品名称" align="center" prop="commodityName" />
        <el-table-column label="商品类别" align="center" prop="commodityTypeName" />
        <el-table-column label="单位" align="center" prop="unitName" />
        <el-table-column label="规格" align="center" prop="commoditySpec" />
        <el-table-column label="单价" align="center" prop="costPrice">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.costPrice ? 0 : scope.row.costPrice) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="totalInventory" />
        <el-table-column label="总金额" align="center" prop="totalAmount">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.totalAmount ? 0 : scope.row.totalAmount) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { listTeamMemberDetails, selectGroupConsumeList, selectGroupStockList } from "@/api/cld/projectRepository";
import analyze from './analyze.vue';
export default {
  name: "teamMemberDetails",
  dicts: ['cld_project_groups', 'cld_project_post'],
  components: {
    analyze
  },
  data() {
    return {
      time: '',
      form: {
        teamMemberList: [],
        managePost: []
      },
      detailsTitle: '',
      detailsOpen: false,
      detailsTotal: 0,
      detailsList: [],
      activeName: '1',
      currRow: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    refresh() {
      this.getList()
    },
    /** 查看项目仓库 */
    getList() {
      let params = {}
      if (this.time) {
        params.startTime = this.time[0]
        params.endTime = this.time[1]
      }
      params.projectId = this.$route.params.projectId
      listTeamMemberDetails(params).then(response => {
        this.form = response.data;
        this.form.groupList.forEach(item => {
          item.stockNumber = 0;
          item.stockMoney = 0;
          item.consumeNumber = 0;
          item.consumeMoney = 0;
          item.list.forEach(i => {
            item.stockNumber += i.stockNumber;
            item.stockMoney += i.stockAmount;
            item.consumeNumber += i.consumeNumber;
            item.consumeMoney += (i.consumeMoney ? parseFloat(i.consumeMoney) : 0);
          })
        })
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 员工库存列表
    handleViewDetails(row, type) {
      this.activeName = type;
      this.detailsTitle = row.staffName + '-物资明细';
      this.currRow = row;
      if (type == 1) {
        selectGroupStockList(row.wareId).then(response => {
          let stockList = [];
          response.data.forEach( item => {
            if(item.totalInventory > 0){
              stockList.push(item);
            }
          })
          this.detailsList = stockList;
          this.detailsOpen = true;
        })
      } else {
        selectGroupConsumeList(row.wareId).then(response => {
          this.detailsList = response.data;
          this.detailsOpen = true;
        })
      }
    },
    // tabs切换
    handleTabsClick() {
      this.handleViewDetails(this.currRow, this.activeName);
    },
    // 返回
    handleReturn() {
      const obj = { path: "/cloudManage/supplies/projectRepository", name: "projectRepository" };
      this.$tab.closeOpenPage(obj);
      this.$tab.refreshPage(obj);
    }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
  color: black;
}

.group_css {
  background: #9093991c;
  margin-bottom: 20px;
}

.group_title {
  font-size: 18px;
  padding: 10px;
  font-weight: 600;
}

.group_number {
  text-align: right;
  padding: 10px;
  padding-right: 50px;
  font-size: 18px;
}
</style>
